<template lang="html">
	<div>
		<div class="header">
			<div class="back">
				<router-link to="home">返回</router-link>
			</div>
			<div class="select">
				<div class="select1">
					自提
				</div>
				<div class="select2">
					配送
				</div>
			</div>
			<div class="city">
				北京市
			</div>
		</div>
		<div id="addressMap" tabindex="0">
			<el-amap :vid="'amap-vue'"></el-amap>
		</div>

		<a href="" class="sousuo">
			搜索提货点
		</a>
		<div class="shoplist">
			<ul class="left">
				<li>昌平区</li>
				<li>海淀区</li>
				<li>朝阳区</li>
				<li>大兴区</li>
				<li>东城区</li>
				<li>西城区</li>
			</ul>
			<ul class="right">
				<router-link to="/home">
					<li>龙山跃（便民超市<img src="../assets/location_mini.png"/><img src="../assets/location_new.png"/></li>
					<li>政府街西路（康洁干洗店）<img src="../assets/location_new.png"/></li>
					<li>石油大学昌平校区学生公寓<img src="../assets/location_mini.png"/></li>
					<li>吉利大学（华联超市）<img src="../assets/location_open.png"/></li>
					<li>北京联合大学（学院北路）<img src="../assets/location_open.png"/></li>
					<li>北京化工大学<img src="../assets/location_fix.png"/></li>
					<li>政法大学（全有超市）<img src="../assets/location_fix.png"/></li>
				</router-link>
			</ul>
		</div>
	</div>
</template>

<style lang="css">
	.header {
		width: 100%;
		height: 2.55rem;
		background: #ffd040;
		border-bottom: 0.05rem solid #cacaca;
	}

	.header .back {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 0.7rem;
		color: #000000;
		line-height: 2.5rem;
		margin-left: 0.8rem;
		text-indent: 0.8rem;
		float: left;
		background: url(../assets/map.png) no-repeat left center;
		background-size: 0.5rem 1rem;
	}

	.header .select {
		width: 8.5rem;
		height: 1.6rem;
		margin-top: 0.5rem;
		margin-left: 0.5rem;
		float: left;
		background: #424644;
		border-radius: 0.25rem;
	}

	.header .select1 {
		width: 49%;
		height: 1.5rem;
		float: left;
		margin-left: 0.03125rem;
		margin-top: 0.03125rem;
		border-radius: 0.140625rem 0 0 0.140625rem;
		text-align: center;
		background: #424644;
		line-height: 1.5rem;
		font-size: 0.4375rem;
		color: #ffd040;
	}

	.header .select2 {
		width: 50%;
		height: 1.5rem;
		background: #ffd040;
		float: right;
		margin-right: 0.03125rem;
		margin-top: 0.03125rem;
		border-radius: 0 0.140625rem 0.140625rem 0;
		text-align: center;
		line-height: 1.5rem;
		font-size: 0.4375rem;
		color: #424644;
	}

	.header .city {
		width: 3.65rem;
		height: 2.5rem;
		float: left;
		line-height: 2.5rem;
		text-indent: 1.2rem;
		background: url(../assets/add.png) no-repeat 0.3rem center;
		background-size: 0.75rem 1rem;
		font-size: 0.7rem;
		color: #000000;
	}
	/* 地图   */

	#addressMap {
		width: 100%;
		height: 12.3rem;
		margin-bottom: 0.21875rem;
	}

	.sousuo {
		font-size: 0.8rem;
		display: block;
		clear: both;
		width: 14.95rem;
		height: 1.65rem;
		border: 0.015625rem solid #b1b1b1;
		border-radius: 0.046875rem;
		margin: 0 auto;
		background: url(../assets/fdj.png) no-repeat 3.53125rem center #f6f6f6;
		background-size: 0.9rem 0.9rem;
		color: #b1b1b1;
		line-height: 1.65rem;
		text-indent: 5rem;
		margin-bottom: 0.1875rem;
	}

	.shoplist{
		height: 11.3rem;
		width:100%;
		/*overflow-y:scroll;*/
		font-size: 0.7rem;

	}
	.shoplist ul{
		overflow-y:scroll;
		height: 11.3rem;
	}
	.shoplist img{
		width:2.8rem;
		height: 0.85rem;
	}

	.shoplist .left{
		width:22%;
		float:left;
		background: #f5f6f8;
		height:
	}

	.shoplist .left li{
		height:2.5rem;
		text-align: center;
		line-height: 2.55rem;
		border-bottom:0.04rem solid #cacaca;
	}
	/*.shoplist .left li:nth-of-type(1){
		border-left: 0.2rem solid #ffc000;
		background: #fff;
		color:#ffb576;
	}*/
	.shoplist .left li:hover{
		border-left: 0.2rem solid #ffc000;
		background: #fff;
		color:#ffb576;
	}

	.shoplist .right{
		width:78%;
		float:left;

	}
	.shoplist .right li{
		border-bottom:0.04rem solid #cacaca;
		height:2.5rem;
		text-align: left;
		line-height: 2.55rem;
		padding-left: 0.5rem;
	}
	.shoplist .right a{
		color:#757a80;
	}

</style>


<script>
	import Vue from "vue"
	import AMap from 'vue-amap';
	Vue.use(AMap);

	// 初始化vue-amap
	AMap.initAMapApiLoader({
	// 高德的key
	key: '3404be3fa91572fa96a49673c2d5b5a3',
	// 插件集合
	plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar',
	'AMap.MapType','AMap.PolyEditor', 'AMap.CircleEditor']
	});

	export default {
		mounted: function() {
			this.init()
		},
		methods: {
			init: function() {
				console.log(AMap)
				//      map = new AMap.Map('addressMap', {
				//        center: [116.397428, 39.90923],
				//        resizeEnable: true,
				//        zoom: 10
				//      })
				//      AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
				//        map.addControl(new AMap.ToolBar())
				//        map.addControl(new AMap.Scale())
				//      })
			}
		}
	}
	//
	//
</script>

